import React ,{useEffect} from 'react'
import {useLocation,useNavigate,useParams} from "react-router-dom"
import { CartO, LikeO, StarO,Like } from '@react-vant/icons'
import {ProductCard,Image,NavBar,ActionBar} from "react-vant"
import {useDispatch,useSelector} from "react-redux"
import {RootDispatch,RootState,DataItem} from "../utils/index"
import * as api from "../api/index"
type Props = {}

const Details = (props: Props) => {
    const location = useLocation()
    const navigate = useNavigate()
    const params = useParams()
    const dispatch:RootDispatch = useDispatch()
    const details_data = useSelector((state:RootState)=>state.details_data)
    useEffect(()=>{
        console.log(params.id);
        dispatch(api.get_details_data(params.id as string))
    },[dispatch])
    console.log(location);
    const add_shopcar = () => {
      dispatch(api.add_shopcar_data(details_data[0]))
    }
  return (
    <div>
        <NavBar
            title="details"
            leftText="返回"
            onClickLeft={() =>navigate("/index/classify")}
        />
          {
            details_data.map((item:DataItem) => {
              return  <ProductCard
                      key={item.id}
                      num="2"
                      price="2.00"
                      desc="描述信息"
                      title={item.title}
                      thumb={
                          <>
                              <Image lazyload src={item.img}/>
                          </>
                      }
                  />
            })
          }
       
         <ActionBar>
          {
            details_data[0] && <ActionBar.Icon
            icon={details_data[0].like === false ? <LikeO  />: <Like /> }
            text={details_data[0].like === false ? "喜欢": "不喜欢"}
            onClick={() => dispatch(api.show_Like())}
          />
          }
         
          <ActionBar.Icon
            icon={<CartO />}
            text='购物车'
            onClick={() => console.log('cart click')}
          />
          <ActionBar.Icon
            icon={<StarO  />}
            text='收藏'
            onClick={() => console.log('shop click')}
          />
          <ActionBar.Button
            type='danger'
            text='加入购物车'
            onClick={add_shopcar}
          />
      </ActionBar>
    </div>
  )
}

export default Details